<template>
  <div class="container">
    <div class="preview" @click="showSwiper()" v-show="!swiperDisplay">
      <img
        src="//img1.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_600x330_8572a930.jpg"
      >
      <div class="desc">上海迪士尼乐园</div>
    </div>
    <div class="swiperContainer" @click="hideSwiper()" v-show="swiperDisplay">
      <swiper :options="swiperOption" v-if="swiperList.length">
        <!-- slides -->
        <swiper-slide v-for="item in swiperList" :key="item.id">
          <img class="swipe-img" :src="item.imgUrl">
        </swiper-slide>
        <!-- Optional controls -->
      </swiper>
      <div class="swiper-pagination" slot="pagination"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction"
        }
      },
      swiperDisplay: false,
      swiperList: [
        {
          id: 1,
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1811/be/bed07cf557c93933a3.water.jpg_r_800x800_ba07dded.jpg"
        },
        {
          id: 2,
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1811/cc/cce6ce13449cbdeea3.water.jpg_r_800x800_1bfb2fe9.jpg"
        }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    hideSwiper() {
      this.swiperDisplay = false;
    },
    showSwiper() {
      this.swiperDisplay = true;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.preview
  overflow hidden
  width 100%

  img
    width 100%

  .desc
    position absolute
    top 4.5rem
    left 0.2rem
    color #ffffff
    font-size 0.32rem

.swiperContainer
  position fixed
  width 100%
  height 100%
  background #000
  display flex
  align-items center

  img
    width 100%

.swiper-pagination
  color #ffffff
  font-size 0.32rem
</style>